<template>
  <div class="home">
    <div class="title">
      <div>
        <div class="title_top" @click="cardShow.version=true">
          <van-icon size="20px" name="info" />
          <label style="display:inline-block">版本：{{version[0].name}}</label>
        </div>
      </div>
      <title-sweeper :color1="themeColor.color_1" :color2="themeColor.color_2">3D扫雷</title-sweeper>
      <div style="text-align: right;">
        <div class="title_bottom" @click="cardShow.about=true">
          <label>by：敲可耐的咕魂君</label>
          <van-icon size="20px" name="info" />
        </div>
      </div>
    </div>
    <br />
    <div class="difficulty">
      <van-cell-group inset style="margin:0;padding: 16px;">
        <van-divider style="margin:0;">难度选择</van-divider>
        <van-cell center :title="difficulty.name">
          <template #right-icon>
            <van-rate @change="onDiffChange" v-model="difficulty.diff" />
          </template>
        </van-cell>
        <van-cell center title="x轴：">
          <template #right-icon>
            <van-stepper async-change @plus="onValueChange" @minus="onValueChange" @blur="onValueChange" min="2" max="20" v-model="difficulty.ux" integer />
          </template>
        </van-cell>
        <van-cell center title="y轴：">
          <template #right-icon>
            <van-stepper async-change @plus="onValueChange" @minus="onValueChange" @blur="onValueChange" min="2" max="20" v-model="difficulty.uy" integer />
          </template>
        </van-cell>
        <van-cell center title="z轴：">
          <template #right-icon>
            <van-stepper async-change @plus="onValueChange" @minus="onValueChange" @blur="onValueChange" min="2" max="20" v-model="difficulty.uz" integer />
          </template>
        </van-cell>
        <van-cell center title="雷数：">
          <template #right-icon>
            <van-stepper async-change @plus="onValueChange" @minus="onValueChange" @blur="onValueChange" min="1" max="999" v-model="difficulty.mineNum" integer />
          </template>
        </van-cell>
        <van-field input-align="right" readonly clickable label="模式选择" :value="modeList[difficulty.mode-1]" @click="cardShow.mode = true" />
        <van-popup v-model="cardShow.mode" round position="bottom">
          <van-picker title="模式选择" show-toolbar :columns="modeList" @cancel="cardShow.mode = false" @confirm="onModeChange" />
        </van-popup>
        <van-notice-bar style="margin:10px 0" left-icon="volume-o" :scrollable="false">
          <van-swipe vertical class="notice-swipe" :autoplay="5000" :show-indicators="false">
            <van-swipe-item>x轴，y轴，z轴，不建议超过10</van-swipe-item>
            <van-swipe-item>雷的数目不建议超过方块数量的一半</van-swipe-item>
          </van-swipe>
        </van-notice-bar>
        <div class="btn_box">
          <div class="icon_btn">
            <!-- 排行榜 -->
            <svg class="icon" aria-hidden="true" @click="cardShow.topList=true">
              <use xlink:href="#icon-paihangbang" />
            </svg>
          </div>
          <div class="icon_btn">
            <!-- 游戏帮助 -->
            <svg class="icon" aria-hidden="true" @click="cardShow.help=true">
              <use xlink:href="#icon-question" />
            </svg>
          </div>
          <div class="play_btn" @click="onGameBegin">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-play" />
            </svg>
            <div>开始游戏</div>
          </div>
          <div class="icon_btn">
            <!-- 游戏设置 -->
            <svg class="icon" aria-hidden="true" @click="cardShow.setting=true">
              <use xlink:href="#icon-settings" />
            </svg>
          </div>
        </div>
      </van-cell-group>
    </div>
    <help-card @close="cardShow.help=false" :show="cardShow.help"></help-card>
    <version-card @close="cardShow.version=false" :show="cardShow.version"></version-card>
    <about-card @close="cardShow.about=false" :show="cardShow.about"></about-card>
    <setting-card @close="cardShow.setting=false,initData()" :show="cardShow.setting"></setting-card>
    <top-list-card @close="cardShow.topList=false" :show="cardShow.topList"></top-list-card>
  </div>
</template>

<script>
// @ is an alias to /src
import TitleSweeper from '@/components/titleSweeper.vue'
import version from '@/assets/json/version.json'
import VersionCard from './home/versionCard.vue'
import AboutCard from './home/aboutCard.vue'
import diffList from '@/assets/json/difficulty.json'
import settingCard from './home/settingCard.vue'
import HelpCard from './home/helpCard.vue'
import TopListCard from './home/topListCard.vue'
export default {
  name: 'Home',
  components: {
    TitleSweeper,
    VersionCard,
    AboutCard,
    settingCard,
    HelpCard,
    TopListCard
  },
  data() {
    return {
      version,
      themeColor: undefined,
      difficulty: undefined,
      cardShow: {
        mode: false,
        version: false,
        about: false,
        setting: false,
        help: false,
        topList: false
      },
      diffList,
      modeList: ['模式一', '模式二']
    }
  },
  created() {
    this.initData()
  },
  mounted() {
    //是否显示版本信息
    if (JSON.parse(localStorage.version).value < version[0].id) {
      localStorage.version = JSON.stringify({ value: version[0].id })
      this.cardShow.version = true
      this.cardShow.help = true
    }
  },
  methods: {
    initData() {
      this.themeColor = this.getState('themeColor') //只读不改可以浅拷贝
      this.difficulty = this.getState('difficulty') //后续方法完成深拷贝
      this.onDiffChange()
    },
    getState(state) {
      return this.$store.getters.getByState(state)
    },
    onDiffChange() {
      //处理难度变化时同步参数
      this.difficulty = Object.assign({}, this.difficulty, this.diffList['mode'+this.difficulty.mode][this.difficulty.diff])
    },
    onValueChange() {
      this.difficulty.diff = 0
      this.difficulty.name = this.diffList['mode'+this.difficulty.mode][0].name
      this.limitDiff()
    },
    limitDiff(){
      if (this.difficulty.ux * this.difficulty.uy * this.difficulty.uz * 0.8 <= this.difficulty.mineNum) {
        this.$set(this.difficulty,'mineNum',parseInt(this.difficulty.ux * this.difficulty.uy * this.difficulty.uz * 0.8))
        this.$toast({ message: '密度超过80%', duration: '500' })
      }
    },
    onModeChange(value) {
      for (let index in this.modeList) {
        if (this.modeList[index] == value) {
          this.difficulty.mode = parseInt(index) + 1
          break
        }
      }
      this.cardShow.mode = false
      this.onDiffChange()
    },
    onGameBegin() {
      let diff = {
        diff: this.difficulty.diff,
        mode: this.difficulty.mode
      }
      this.$store.commit('setState', { key: 'difficulty', data: this.difficulty }) //两次的diff不同，不能给save属性
      // console.log(this.$store.getters.getByState('difficulty'))
      localStorage['difficulty'] = JSON.stringify(diff)
      this.$router.push('/game')
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.title {
  padding: 20px;
  .title_top,
  .title_bottom {
    font-size: 18px;
    display: inline;
    * {
      vertical-align: middle;
    }
  }
  // .van-icon {
  // margin-top: 3px;
  // }
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.btn_box {
  display: flex;
  justify-content: center;
  text-align: center;
  color: #323233;
  .icon_btn {
    flex: 1;
    width: 0;
    svg {
      padding: 5px;
      border: #323233 solid 1px;
      border-radius: 50%;
    }
  }
  .play_btn {
    width: 0;
    flex: 2;
    display: flex;
    justify-content: center;
    padding: 5px;
    margin: 0 5px;
    border: #323233 solid 1px;
    border-radius: 10px;
    div {
      margin: auto 0;
    }
  }
}
</style>